<template>
  <scroll-view
    :scroll-x="scroll.x"
    :scroll-y="scroll.y"
    class="scroll-container"
    :class="className"
  >
    <swiper
      :indicator-dots="indicatorDots"
      :autoplay="autoplay"
      :interval="interval"
      :duration="duration"
      circular
      previous-margin="10px"
      next-margin="10px"
      class="swiper-corner"
    >
      <swiper-item
        v-for="(item,index) in swipers"
        :key="index"
        class="swiper-corner-item"
      >
        <view class="swiper-item">
          <image
            :src="item.thumb"
            mode="aspectFill"
          />
          <div :class="item.class">
            {{item.title}}
          </div>
        </view>
      </swiper-item>
    </swiper>
    <double-fence :items="cells" />

    <van-cell-group>
      <column
        :format="item.format"
        :title="item.title"
        :description="item.description"
        :medias="item.medias"
        v-for="(item,index) in items"
        :key="index"
      />
    </van-cell-group>
  </scroll-view>
</template>

<script>
import Column from '@/components/column/index'
import DoubleFence from '@/components/doubleFence'
export default {
  components: {
    Column,
    DoubleFence
  },
  props: {
    url: {
      type: String,
      default: ''
    },
    className: {
      type: String,
      default: ''
    },
    scroll: {
      type: Object,
      default: {
        x: false,
        y: true
      }
    }
  },
  data () {
    return {
      swipers: [
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/01.png',
          class: 'demo-text-1'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/02.png',
          class: 'demo-text-3'
        },
        {
          title: '',
          description: '',
          thumb: 'http://oss.youmbe.com/attachments/temp/swiper/03.png',
          class: 'demo-text-3'
        }
      ],
      indicatorDots: true,
      vertical: false,
      autoplay: false,
      interval: 2000,
      duration: 500,
      cells: [
        {
          id: 1,
          title: '随后拍',
          price: '￥100',
          thumb: 'http://oss.youmbe.com/mp/1.png',
          description: '随时随地，想拍就拍'
        },
        {
          id: 2,
          title: '信息发布',
          price: '￥500',
          thumb: 'http://oss.youmbe.com/mp/2.png',
          description: '最新的消息都属于你'
        },
        {
          id: 3,
          title: '投票',
          price: '￥200',
          thumb: 'http://oss.youmbe.com/mp/3.png',
          description: '为他投上一票'
        },
        {
          id: 4,
          title: '抽奖',
          price: '￥1480',
          thumb: 'http://oss.youmbe.com/mp/4.png',
          description: '惊喜好运在这里'
        }
      ],
      items: [
        {
          id: 1,
          title: '12年前发明“熊猫烧香”病毒的网络天才，坐4年牢后，现状如何？',
          description: '微观影1视 1小时前 102评论',
          format: 'banner',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/01.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 2,
          title: '济南东部房价“喋喋不休”，西部房价依然坚挺，为何？',
          description: '济南楼市 1小时前 102评论',
          format: 'default',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/02.jpg',
              format: 'video'
            }
          ]
        },
        {
          id: 3,
          title: '心寒！市民主动清理黑衣人设置的路障 被暴徒用重器猛击头部',
          description: '环球网国内 7小时前 21评论',
          format: 'default',
          medias: []
        },
        {
          id: 4,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/05.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 6,
          title: '32核心64线程 AMD锐龙Threadripper 3970X评测',
          description: '中关村在线 12-01 05:27 21评论',
          format: 'fence',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/03.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/04.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 5,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        },
        {
          id: 7,
          title: '国庆七十周年阅兵 显国威、振军威',
          description: '凤凰网 10-01 10:27 12,321评论',
          format: 'grid',
          medias: [
            {
              path: 'http://oss.youmbe.com/attachments/temp/11.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/12.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/13.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/14.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/15.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/16.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/17.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/18.jpg',
              format: 'image'
            },
            {
              path: 'http://oss.youmbe.com/attachments/temp/19.jpg',
              format: 'image'
            }
          ]
        }
      ]
    }
  },
  watch: {},
  computed: {},
  beforeMount () {},
  mounted () {},
  methods: {}
}
</script>

<style lang="less">
.scroll-container {
  height: 100%;
}
.swiper-corner {
  margin: 15px 0;
}

.demo-text-1 {
  background-color: rgb(142, 226, 14);
}
.demo-text-2 {
  background-color: tomato;
}
.demo-text-3 {
  background-color: rgb(248, 186, 29);
}
.hot-group {
  padding: 15px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-wrap: wrap;

  &-cell {
    flex-basis: 50%;
    .van-cell {
      padding: 10px;
      &__value {
        flex: none;
        -webkit-flex: none;
      }
    }

    image {
      width: 30px;
      height: 30px;
    }
  }

  &-cells {
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #f1f2f3;
    background-color: #f1f2f3 !important;
    .van-cell__value {
      flex: none;
      -webkit-flex: none;
    }
    .van-radio__icon {
      .van-icon {
        display: none !important;
      }
    }
    &__checked {
      border-color: #f7a031;
      background-color: rgba(245, 175, 80, 0.2) !important;
      .van-cell__title,
      .van-cell__label,
      .van-cell__value {
        color: #ff6600;
      }
    }
  }
}
</style>
